<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--引入统一头-->
<head th:include="import/head::head"></head>
<style type="text/css">
    .layui-table-cell {
        height: auto;
        line-height: 28px;
    }
</style>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出产地</label>
                    <div class="layui-input-block">
                        <input type="text" name="place" placeholder="请输入出产地" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加商品</button>
            </div>
            <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>

            <script type="text/html" id="table-useradmin-webuser">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script type="text/html" id="qrcodeTpl">
    <div><img src="data:image/jpeg;base64,{{ d.qrcode }}"></div>
</script>

<script th:replace="import/script::script"></script>
<script>
    layui.use(['form', 'table'], function () {
        //时间戳的处理
        layui.laytpl.toDateString = function (d, format) {
            if (!d) {
                return "";
            }
            var date = new Date(d || new Date())
                , ymd = [
                this.digit(date.getFullYear(), 4)
                , this.digit(date.getMonth() + 1)
                , this.digit(date.getDate())
            ]
                , hms = [
                this.digit(date.getHours())
                , this.digit(date.getMinutes())
                , this.digit(date.getSeconds())
            ];

            format = format || 'yyyy-MM-dd';

            return format.replace(/yyyy/g, ymd[0])
                .replace(/MM/g, ymd[1])
                .replace(/dd/g, ymd[2])
                .replace(/HH/g, hms[0])
                .replace(/mm/g, hms[1])
                .replace(/ss/g, hms[2]);
        };

        var $ = layui.$
            , form = layui.form
            , table = layui.table;

        //定义table
        var t = layui.$, i = layui.table;
        layui.form;
        var col = [{
            field: "name",
            title: "名称"
        }, {
            field: "place",
            title: "出产地"
        }, {
            field: "unitPrice",
            title: "单价"
        }, {
            field: "distributor",
            title: "经销商"
        }, {
            field: "qrcode",
            title: "二维码",
            templet: '#qrcodeTpl'
        }, {
            field: "createTime",
            title: "创建时间",
        }, {
            title: "操作",
            align: "center",
            fixed: "right",
            toolbar: "#table-useradmin-webuser",
            width: '16%'
        }];
        i.render({
            elem: "#LAY-user-manage",
            url: "queryCommodityPage",
            cols: [col],
            page: {limit: 30},
            height: "full-220",
            text: "对不起，加载出现异常！"
        }),
            i.on("tool(LAY-user-manage)", function (e) {
                var _id = e.data.id;
                if ("delete" === e.event) {
                    layer.confirm("确定删除？", function () {
                        layer.load(2);
                        $.ajax({
                            type: "delete",
                            url: _id + "/delete",
                            dataType: "json",
                            success: function (res) {
                                if (200 === res.code) {
                                    layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                        window.location.reload();
                                    });
                                } else {
                                    layer.msg(res.msg, {icon: 5, time: 1500});
                                }
                            },
                            error: function () {
                                layer.closeAll('loading');
                                layer.msg("删除错误", {icon: 5});
                            }
                        });
                    });
                } else if ("edit" === e.event) {
                    layer.open({
                        type: 2
                        , title: '修改商品'
                        , content:  _id + '/edit'
                        , maxmin: true
                        , area: ['80%', '80%']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-user-front-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);
                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                // var body = layer.getChildFrame('body');
                                var field = data.field; //获取提交的字段
                                //提交 Ajax 成功后，静态更新表格中的数据
                                $.ajax({
                                    //提交数据的类型 POST GET
                                    type: "POST",
                                    //提交的网址
                                    url: "add",
                                    //提交的数据
                                    data: field,
                                    //返回数据的格式
                                    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
                                    //在请求之前调用的函数
                                    //beforeSend:function(){$("#msg").html("logining");},
                                    //成功返回之后调用的函数
                                    success: function (data) {
                                        if (data.code == "200") {
                                            layer.msg('操作成功');
                                            layer.close(index); //关闭弹层
                                            table.reload('LAY-user-manage'); //数据刷新
                                        } else {
                                            layer.msg(data.message);
                                        }
                                    },
                                    //调用执行后调用的函数
                                    complete: function (XMLHttpRequest, textStatus) {
                                    },
                                    //调用出错执行的函数
                                    error: function () {
                                        //请求出错处理
                                    }
                                });
                            });

                            submit.trigger('click');
                        }
                    });
                }
            });

        //监听搜索
        form.on('submit(LAY-user-front-search)', function (data) {
            var field = data.field;

            //执行重载
            table.reload('LAY-user-manage', {
                where: field
            });
        });

        //事件
        var active = {
            batchdel: function () {
                var checkStatus = table.checkStatus('LAY-user-manage')
                    , checkData = checkStatus.data; //得到选中的数据
                // var dataJson = JSON.stringify(checkData);
                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }
            }
            , add: function () {
                layer.open({
                    type: 2
                    , title: '添加商品'
                    , content: 'add'
                    , maxmin: true
                    , area: ['80%', '80%']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'LAY-user-front-submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            // var body = layer.getChildFrame('body');
                            var field = data.field; //获取提交的字段
                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                //提交数据的类型 POST GET
                                type: "POST",
                                //提交的网址
                                url: "add",
                                //提交的数据
                                data: field,
                                //返回数据的格式
                                datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
                                //在请求之前调用的函数
                                //beforeSend:function(){$("#msg").html("logining");},
                                //成功返回之后调用的函数
                                success: function (data) {
                                    if (data.code == "200") {
                                        layer.msg('操作成功');
                                        layer.close(index); //关闭弹层
                                        table.reload('LAY-user-manage'); //数据刷新
                                    } else {
                                        layer.msg(data.message);
                                    }
                                },
                                //调用执行后调用的函数
                                complete: function (XMLHttpRequest, textStatus) {
                                },
                                //调用出错执行的函数
                                error: function () {
                                    //请求出错处理
                                }
                            });
                        });

                        submit.trigger('click');
                    }
                });
            },
        };

        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>
